<template>
	<view class="content">
		<!-- <view class="logo-wrap">
			<image class="logo" src="../../static/logo.png" mode=""></image>
		</view> -->
		
		<image class="loginbg" :style="{width: screenWidth + 'px', height: screenHeight + 'px'}" src="../../static/img/login/bg.png" mode="aspectFill" ></image>
		
		<view class="backbg" @click="gobackfun">
		    <image class="goback" src="../../static/img/login/goback.png" mode="aspectFill"></image>
		</view>
		<view style=" position: relative;">
			<view class="loginp">登录</view>
			<view class="loginmsg" >您好，欢迎来到爱特米</view>
		</view>

		<view class="form-wrap">
			<view class="form-item">
				<!-- <image class="icon" src="../../static/img/phone_icon.png" mode=""></image> -->
				<text class="textsty">+86</text>
				
				<input v-model="form.tel" type="number" placeholder="请输入手机号码" @input="inputfun">
				<image class="icon-right" src="../../static/img/login/dell.png" mode="" v-if="dell" @click="dellfun"></image>
				
			</view>
			<view class="form-item">
				<!-- <image class="icon" src="../../static/img/yanzhengma_icon.png" mode=""></image> -->
				<input v-model="form.code" class="yzinp" type="number" placeholder="请输入验证码">
				<view :disabled="disabled" @click="sendSMS" :class="['sendMessage-btn', disabled ? 'disabled' : '']" type="primary">{{verifyCodeBtnText}}</view>
			</view>
		</view>
		<view class="btn-wrap">
			<button  @click="login">登录</button>
		</view>
		
		<!-- 填写邀请码、手机号 -->
		<!-- <uni-popup ref="yqPopup" type="center" >
			<view class="yq-popup">
				<view class="yq-popup-title">
					<text>绑定邀请人</text>
				</view>
				<view class="yq-popup-input-wrap">
					<input class="yq-popup-input" type="text" v-model="yqm" placeholder="请您填写朋友的邀请码/手机号" />
				</view>
				<view class="yq-popup-btn-wrap">
					<view class="yq-popup-btn">
						<button type="default" class="cancel-btn" @click="overflow">跳过</button>
					</view>
					<view class="yq-popup-btn">
						<button type="primary" class="enter-btn" @click="enter">确定</button>
					</view>
				</view>
			</view>
		</uni-popup> -->
		
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup,
		},
		data() {
			return {
				device_code: '',
				form: {
					tel: '',
					code: '',
				},
				disabled: false,
				verifyCodeBtnText: '发送验证码',
				myInfo: {},
				screenWidth: 0,  //屏幕宽度信息
				screenHeight: 0,
				dell:false,  //是否显示删除按钮
				yqm: '', //邀请码或手机号
			}
		},
		onLoad() {
			
			
			try {
				const device_code = uni.getStorageSync('device_code');
				if (device_code) {
					this.device_code = device_code
				}
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo) {
					this.screenWidth = systemInfo.screenWidth + 1
					this.screenHeight = systemInfo.screenHeight + 1
				
				}
				
			} catch (e) {
				console.log(e);
			}
			
		},
		onReady() {
			// this.openfun();
		},
		onBackPress(e) {
			plus.key.hideSoftKeybord();
		},
		methods: {
			// openfun(){
			// 	this.$refs['yqPopup'].open();
			// },
			ctimer: function (time) {
				var t = time;
				if (t > 0) {
					this.disabled = true;
					this.verifyCodeBtnText = t + '秒';
					t--;
					setTimeout(() => {
						this.ctimer(t);
					}, 1000);
				} else {
					this.disabled = false;
					this.verifyCodeBtnText = '获取验证码';
				}
			},

			sendSMS: function () {
				var regex = /^[1]([3-9])[0-9]{9}$/;
				if (this.form.tel == '') {
					uni.showToast({
						title: '请输入手机号码',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (!regex.test(this.form.tel)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				this.disabled = true;
				uni.showLoading({
					title: ''
				});
				this.$api.api.ajaxData({
					method: 'V1.SendMassage',
					tel: this.form.tel,
				}, res => {
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						position: 'bottom',
						icon: 'none'
					});
					if (res.status) {
						this.ctimer(60);
					} else {
						this.disabled = false;
					}
				}, err => {
					this.disabled = false;
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			},

			login: function () {
				var regex = /^[1]([3-9])[0-9]{9}$/;
				if (this.form.tel == '') {
					uni.showToast({
						title: '请输入手机号码',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (!regex.test(this.form.tel)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (this.form.code == '') {
					uni.showToast({
						title: '请输入验证码',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				
				uni.showLoading({
					title: ''
				});
				this.$api.api.ajaxData({
					method: 'V1.TelLogin',
					device_code: this.device_code,
					tel: this.form.tel,
					code: this.form.code,
				}, res => {
					console.log('登录返回结果',res)
					uni.hideLoading();
					if (res.status) {
						if (res.code == 200) {
							
							// [0=>'无',8=>'禁止登录',4=>'禁止开播',2=>'禁止发言',1=>'异常用户']
							if(res.data.ban==1 || res.data.ban==8){
								uni.showToast({
									title: '您被系统禁止登录',
									position: 'bottom',
									icon: 'none'
								});
								return;
							}
														
							// 直接登录
							this.myInfo.id = res.data.id;
							this.myInfo.lid = res.data.lid;
							this.myInfo.name = res.data.name;
							this.myInfo.avatar = res.data.avatar;
							this.myInfo.tel = res.data.tel + '';
							this.myInfo.sex = res.data.sex;
							this.myInfo.age = res.data.age;
							this.myInfo.type = res.data.type;
							this.myInfo.vip = res.data.vip;
							this.myInfo.tuid = res.data.tuid;
							this.myInfo.channel = res.data.channel;
							this.myInfo.token = res.data.token;
							this.myInfo.UserSig = res.data.UserSig;
							this.myInfo.ban = res.data.ban;
							uni.setStorage({
								key: 'myInfo',
								data: this.myInfo,
								success: function() {
									console.log('myInfo已存储');
									uni.switchTab({
										url: '../home/home'
									});
								}
							});
							this.$tim.login({
								userID: this.IDBEFORE + res.data.id + '',
								userSig: res.data.UserSig,
							}).then(imResponse => {
								console.log('IM 登录成功:', imResponse.data);
								uni.showToast({
									title: '登录成功',
									position: 'bottom',
									icon: 'none'
								});
								setTimeout(() => {
									uni.switchTab({
										url: '../home/home'
									});
								}, 1000)
							}).catch(imError => {
								console.warn('IM 登录失败:', imError);
								// uni.showToast({
								// 	title: '登录失败',
								// 	position: 'bottom',
								// 	icon: 'none'
								// });
							});
						}
						if (res.code == 201) {
							// 填写邀请码弹框
							// this.$refs['withdrawPopup'].open();
							// 去注册
							uni.navigateTo({
								url: '../register/register?tel=' + this.form.tel + '&code=' + this.form.code
								
							});
						}
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
					}
				}, err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			},
			
			// 输入框输入事件
			inputfun(e){
				if(e.detail.value!=""){
					this.dell=true;
				}
			},
			dellfun(){
				this.form.tel = '';
				this.dell=false;
			},
			gobackfun(){
				uni.navigateTo({
					url: '../welcome/welcome'
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	page {
		background-color: #FFFFFF;
	}
	.content{
		padding: 68rpx 30rpx 0;
		
	}
	.loginbg{
		position: absolute;
		top: 0;
		left: 0;
	}
	.backbg{
		width: 100%;
		height:46rpx ;
		margin-bottom: 98rpx;
		margin-top: 68rpx;
	}
	.goback{
		width: 26rpx;
		height: 45rpx;
	}
	.loginp{
		font-size: 60rpx;
		color: #2b2b2b;
		margin-left: 66rpx;
		font-weight: bold;
		font-family: 'SourceHanSansCN'!important;
		line-height: 60rpx;
	}
	.loginmsg{
		font-size: 30rpx;
		color: #979797;
		margin-left: 66rpx;
		font-family: 'SourceHanSansCN'!important;
		line-height: 30rpx;
		margin-top: 26rpx;
	}
	.logo-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 100rpx 0;

		.logo {
			display: block;
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
		}
	}

	.form-wrap {
		margin-top: 142rpx;
		padding: 0 72rpx;
		position: relative;
		
		.form-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 100rpx;
			margin-bottom: 6rpx;
			// border-bottom: 1rpx solid $border-dark-color;
			.textsty{
				font-size: 30rpx;
				color: #111111;
				padding-left: 10rpx;
				margin-top: -4rpx;
			}
			.icon {
				width: 40rpx;
				height: 40rpx;
			}

			input {
				flex: 1;
				text-indent: 20rpx;
				font-size: 24rpx;
			}
            .icon-right {
				width: 24rpx;
				height: 24rpx;
			}
			.yzinp{
				font-size: 30rpx;
			}
			.sendMessage-btn {
				padding-right: 0px !important;
				height: 80rpx;
				line-height: 86rpx;
				font-size: 24rpx !important;
				// background-color: #fff !important;
				color:#fe2e61 ;
				background-image: none;
				&.disabled{
					pointer-events: none;
				}
				&:active{
					background-color: none !important;
				}
				&:hover{
					background-color: none !important;
				}
				
			}
		}
	}

	.btn-wrap {
		margin-top: 100rpx;
		padding: 0 100rpx;

		position: absolute;
		bottom: 280rpx;
		left: 50%;
		transform: translate(-50%,0);
		button {
			border-radius: 100rpx;
			background-image: none;
			background-color: #fe2e61;
			width: 460rpx !important;
			height: 80rpx !important;
			font-size: 34rpx !important;
			line-height: 80rpx;
			color: #fff !important;
		}
	}
	
	.yq-popup {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 472rpx;
		height: 340rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
	}
	.yq-popup-title {
		margin-bottom: 50rpx;
		line-height: 36rpx;
		text {
			font-size: 36rpx;
			color: #000;
			font-weight: bold;
		}
	}
	.yq-popup-input-wrap {
		display: flex;
		height: 40rpx;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		// border: 1rpx solid #EFEFEF;
		// border-radius: 10rpx;
	}
	.yq-popup-input {
		width: 330rpx;
		font-size: 24rpx !important;
		color: #333333;
		&:placeholder{
			text-align: center;
			font-size: 24rpx !important;
		}
	}
	.yq-popup-btn-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 360rpx;
		margin-top: 50rpx;
		.withdraw-popup-btn {
			width: 150rpx;
		}
		button {
			height: 54rpx;
			font-size: 29rpx !important;
			border-radius: 26rpx;
			line-height: 52rpx;
			width: 150rpx;
			font-family: "SourceHanSansCN" !important;
			box-sizing: border-box;
			&.cancel-btn{
				border: 1rpx solid #fe2e61;
				color: #fe2e61 !important;
				background-color: #fff !important;
			}
			&.enter-btn{
				background-image: none;
				background-color: #fe2e61 !important;
				color: #fff;
				// float: right;
			}
		}
	}
	
	button[type=primary][disabled] {
		background-image: none;
		background-color: #fff !important;
	}
	button[type=primary][active] {
		
		background-color: #fff !important;
	}
	
</style>
